<template>
  <Card>
    <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
      <Form-item label="日期范围：" prop="date">
        <DatePicker
          v-model="searchForm.date"
          placeholder="请选择日期范围"
          placement="bottom-start"
          style="width: 200px"
          type="daterange"
        ></DatePicker>
      </Form-item>
      <Form-item label="车辆线路：" prop="line">
        <Select v-model="searchForm.line" clearable placeholder="选择车牌号" style="width:200px;">
          <Option value="-1">全部</Option>
          <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
        </Select>
      </Form-item>
      <Form-item label="车牌号：" prop="license_plate_num">
        <Input
          v-model="searchForm.license_plate_num"
          clearable
          placeholder="支持模糊搜索"
          style="width: 200px"
          type="text"
        />
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
        <Button @click="handleReset">重置</Button>
      </Form-item>
    </Form>
    <vxe-toolbar>
      <template v-slot:buttons>
        <!-- <upload-file @on-change="uploadDropOff($event)" button-name="导入掉趟" ref="uploadCardFile"></upload-file> -->
        <Button
          :disabled="exportBtnDisable"
          icon="md-cloud-download"
          type="primary"
          @click="exportDropOff"
        >导出
        </Button>
        <vxe-button size="medium" status="success" @click="saveEvent">保存</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      :data="data"
      :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
      :footer-cell-class-name="footerCellClassName2"
      :footer-method="footerMethod"
      :loading="loading"
      align="center"
      border
      height="650"
      highlight-cell
      keep-source
      resizable
      show-footer
      show-overflow
      size="mini"
    >
      <vxe-table-column type="seq" width="100"></vxe-table-column>
      <vxe-table-column field="date" sortable title="时间" width="200"></vxe-table-column>
      <vxe-table-column field="line" sortable title="线路" width="200"></vxe-table-column>
      <vxe-table-column field="bus_num" sortable title="车牌号" width="200"></vxe-table-column>
      <vxe-table-column
        :edit-render="{name: 'input'}"
        field="drop_trip"
        sortable
        title="掉趟"
        width="200"></vxe-table-column>
      <vxe-table-column
        :edit-render="{name: '$select', options: reasonList, props: {multiple: true}}"
        field="reason"
        sortable
        title="掉趟原因"
        width="200"></vxe-table-column>
      <vxe-table-column
        :edit-render="{name: 'input'}"
        field="remark"
        sortable
        title="备注"
        width="200"></vxe-table-column>
    </vxe-table>
    <Modal v-model="modal" :closable="false" :mask-closable="false" width="360">
      <p slot="header" style="color:#2d8cf0;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>文件上传成功，正在导入数据</span>
      </p>
      <div style="text-align:center">
        <Button :loading="importLoading" long size="large" type="error">导入中...</Button>
      </div>
      <div slot="footer"></div>
    </Modal>
  </Card>
</template>
<script>
import UploadFile from '../my-components/upload-file'
import {dictData, dropOffList, importDropOff, updateDropOff} from '../../api/mileage'
import XEUtils from 'xe-utils'
import moment from 'moment'

export default {
  components: {
    UploadFile
  },
  data() {
    return {
      searchForm: {
        line: '-1',
        license_plate_num: '',
        date: [null, null],
      },
      exportBtnDisable: true,
      loading: false,
      data: [],
      modal: false,
      importLoading: false,
      lines: [],
      reasonList: [],
    }
  },
  created() {
    this.getMileageList()
    this.getDictData()
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    footerMethod({columns, data}) {
      const sums = []
      columns.forEach((column, columnIndex) => {
        if (columnIndex === 0) {
          sums.push('合计')
        } else {
          let sumCell = null
          switch (column.property) {
            case 'drop_trip':
              sumCell = XEUtils.sum(data, column.property)
              break
            case 'date':
            case 'line':
            case 'bus_num':
              sumCell = '-'
              break
          }
          sums.push(sumCell)
        }
      })
      // 返回一个二维数组的表尾合计
      return [sums]
    },
    footerCellClassName2({$rowIndex, column, columnIndex}) {
      if ($rowIndex === 0) {
        return 'col-gray'
      }
    },
    //导出
    exportDropOff() {
      const line = this.searchForm.line
      const license_plate_num = this.searchForm.license_plate_num
      const dateRange = this.searchForm.date
      const start_date = moment(dateRange[0]).format('YYYY-MM-DD')
      const end_date = moment(dateRange[1]).format('YYYY-MM-DD')
      const date = start_date + ',' + end_date
      window.location.href =
        '/api/exportDropOff?line=' +
        line +
        '&license_plate_num=' +
        license_plate_num +
        '&date=' +
        date
    },
    getMileageList() {
      this.loading = true
      dropOffList(this.searchForm).then(res => {
        this.loading = false
        if (res.data) {
          this.data = res.data.gasRecord
          this.searchForm.date = res.data.date
          if ((res.data.gasRecord).length > 0) {
            this.exportBtnDisable = false
          }
        }
      })
    },
    getDictData() {
      dictData({title: '掉趟原因'}).then(res => {
        if (res.data.result) {
          this.reasonList = res.data.result
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.getMileageList()
    },
    handleSearch() {
      this.getMileageList()
    },
    uploadDropOff(event) {
      this.modal = true
      this.importLoading = true
      importDropOff({url: event.url}).then(res => {
        if (res.data) {
          this.$Message.success(res.message)
          this.getMileageList()
        } else {
          this.$Message.error(res.message)
        }
        this.modal = false
        this.importLoading = false
      })
    },
    saveEvent() {
      const updateRecords = this.$refs.xTable.getUpdateRecords()
      if (updateRecords.length === 0) {
        this.$message.info('未编辑数据')
      } else {
        this.loading = true
        updateDropOff(updateRecords).then(res => {
          if (res.data) {
            this.$Message.success(res.message)
            this.getMileageList()
          } else {
            this.$Message.error(res.message)
          }
        })
      }
    },
  }
}
</script>
<style>
.col-gray {
  background-color: #dcdee2;
  color: #606266;
}
</style>
